<template>
  <el-dialog
    title="选择建品方式"
    top="10vh"
    :close-on-press-escape="false"
    :visible.sync="dialogVisible"
    width="1000px"
    :before-close="handleClose"
  >

    <div class="createType">
      <div class="title">请选择建品方式和文描商：</div>
      <el-form ref="ruleForm" :model="formDate" size="small">
        <el-table :data="formDate.data" border style="width: 100%">
          <el-table-column prop="upc" label="UPC" align="center" />
          <el-table-column prop="skuName" label="商品描述" align="center" />
          <el-table-column prop="creationWay" label="建品方式" align="center">
            <template v-slot="scope">
              <el-form-item
                :prop="'data.' + scope.$index + '.creationWay'"
                :rules="[{ required: true,trigger: 'blur' }]"
              >
                <el-select v-model="formDate.data[scope.$index].creationWay" placeholder="请选择建品方式" size="small" clearable @change="change($event,scope.row)">
                  <el-tooltip v-for="item in createGoodsType" :key="item.value" class="tooltipItem" effect="light" :content="item.tip" placement="right-start">
                    <el-option
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-tooltip>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="contentMerchantId" label="选择文描服务商" align="center">
            <template v-slot="scope">
              <el-form-item
                :prop="'data.' + scope.$index + '.contentMerchantId'"
                :rules="formDate.data[scope.$index].creationWay !== 1?[{ required: true,trigger: 'blur' }]:[]"
              >
                <el-select
                  v-model="formDate.data[scope.$index].contentMerchantId"
                  placeholder="请选择文描服务商"
                  size="small"
                  :disabled="formDate.data[scope.$index].pbVendorFlag == 1 || formDate.data[scope.$index].directImportFlag == 1 || formDate.data[scope.$index].creationWay === 1"
                  clearable
                >
                  <el-option
                    v-for=" (v) in scope.row.pbOption && Array.isArray(scope.row.pbOption) ? scope.row.pbOption : option"
                    :key="v.vendorNbr"
                    :label="v.vendorName"
                    :value="v.vendorNbr"
                  />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column prop="date" label="操作" align="center">
            <template v-slot="scope">
              <el-button type="text" size="small" @click="oneClick(scope)">一键应用到其他商品</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div v-show="tipShow" class="errorTip">
        <i class="el-icon-warning-outline" />请填写完整信息后提交！
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取 消</el-button>
      <el-button type="primary" size="mini" :loading="loading" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { createGoodsTypeKind } from '@/views/coi/commonJs/dictionary'
import { getSupplier, creationWay } from '@/api/coi/onlineTaskAPI/sku'

export default {
  name: 'CreateGoodsType',
  props: {
    formDate: {
      type: Object,
      default: () => { return { data: [] } }
    }
  },
  data() {
    return {
      dialogVisible: false,
      createGoodsType: createGoodsTypeKind,
      tipShow: false,
      option: [],
      loading: false
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    async querySupplier() {
      const { result } = await getSupplier()
      if (result && result.length) {
        this.option = result.map(item => {
          return {
            vendorNbr: item.vendorNbr,
            vendorName: item.vendorName
          }
        })
      }
    },
    open() {
      this.$alert('未找到相应合作的文描服务商，建品方式仅可选择自助建品。', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(_ => {
      })
    },
    open_pb() {
      this.$alert('未找到相应合作的pb文描服务商，建品方式仅可选择自助建品。', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(_ => {
      })
    },
    // 校验表单规则
    submitForm() {
      const _this = this
      this.tipShow = false
      this.$refs.ruleForm.validate(async(v) => {
        try {
          this.loading = true
          _this.tipShow = !v
          if (!v) return
          const params = this.formDate.data.map((item) => {
            return {
              id: item.id,
              creationWay: item.creationWay,
              contentMerchantId: item.contentMerchantId
            }
          })
          console.log(params)
          const { result } = await creationWay(params)
          if (typeof result === 'number' && result) {
            this.$message({
              type: 'success',
              message: '提交成功!'
            })
            this.handleClose()
            this.$emit('savaSuccess')
          }
        } finally {
          this.loading = false
        }
      })
    },

    oneClick({ row }) {
      const pbVendorFlag = row.pbVendorFlag
      const copyObj = {
        creationWay: row.creationWay,
        contentMerchantId: row.contentMerchantId
      }
      this.formDate.data.forEach(element => {
        if (pbVendorFlag === element.pbVendorFlag) {
          element.creationWay = copyObj.creationWay
          if (!pbVendorFlag) {
            element.contentMerchantId = copyObj.contentMerchantId
          } else {
            element.contentMerchantId = element.pbOption && element.pbOption[0] && element.pbOption[0].vendorNbr
          }
        }
      })
    },

    change(value, row) {
      if (!value) return
      if (value === 1) {
        row.contentMerchantId = null
      } else {
        if ((row.pbVendorFlag || row.directImportFlag) && row.pbOption && row.pbOption.length) row.contentMerchantId = row.pbOption[0].vendorNbr
        else if ((row.pbVendorFlag || row.directImportFlag) && (!row.pbOption || !row.pbOption.length)) {
          this.open_pb()
        } else if (!row.directImportFlag && !row.pbVendorFlag && !this.option.length) {
          this.open()
        }
      }
    },

    // Remove the rules
    removeRules() {
      this.$refs.ruleForm.resetFields()
      this.tipShow = false
    }
  }
}
</script>

<style scoped lang="scss">
.createType{
  .el-form-item{
  margin: 0;
  }
  .el-table td{
    padding: 0;
  }
  .title{
    margin-bottom: 20px;
  }
  .errorTip{
    margin: 10px 0 0 0;
    display: flex;
    align-items: center;
    color: #f56c6c;
    i{
      font-size: 16px;
      margin-right: 5px;
    }
  }
}
/deep/ .el-input__inner{
    height: 32px!important;
  }
</style>
